<template>
  <div class="content">
    <div class="title">
      优惠券
    </div>
    <div class="tabs">
      <div class="tabitem" :class="acindex==0? 'activeit' : ''" @click="changeit(0)">
        未使用
      </div>
      <div class="tabitem" :class="acindex==1? 'activeit' : ''" @click="changeit(1)">
        已使用
      </div>
      <div class="tabitem" :class="acindex==2? 'activeit' : ''" @click="changeit(2)">
        已失效
      </div>
    </div>
    <div class="youhuijuanbox" v-if="list2&&list2.length>0">
      <div class="youhuijuanitem" v-for="(item,index) of list2" :key="index" :class="acindex==2?'huidu':''">
        <div class="youzuo">
          <div class="row1" v-if="item.coupons&&item.coupons.counponsType==1">
            <div class="danwei">¥</div>
            <div class="qianqian">
              ¥{{item.coupons.counponsEnjoyDiscount/100}}
            </div>
          </div>
          <div class="row1" v-if="item.coupons&&item.coupons.counponsType==2">
            <div class="danwei">打</div>
            <div class="qianqian">
              {{item.coupons.counponsDiscount}}
            </div>折
          </div>
          <div class="row2">
            优惠券
          </div>
        </div>
        <div class="youzhong">
          <div class="row1" v-if="item.coupons&&item.coupons.counponsUseThreshold==1">
            无门槛{{item.coupons.counponsType==1?'减'+item.coupons.counponsEnjoyDiscount/100+'元':'打'+item.coupons.counponsDiscount+'折'}}
          </div>
           <div class="row1" v-if="item.coupons&&item.coupons.counponsUseThreshold==2">
            满{{item.coupons.counponsFullPayment/100}}{{item.coupons.counponsType==1?'减'+item.coupons.counponsEnjoyDiscount/100:'元打'+item.coupons.counponsDiscount+'折'}}
          </div>
          <div class="row2" v-if="item.couponsStarted&&item.couponsEnd">
            {{item.couponsStarted?item.couponsStarted.substring(0,10)+'~'+item.couponsEnd.substring(0,10):''}}
          </div>
          <!-- <div class="row3">
            限制使用分类
          </div> -->
          
        </div>
        <div class="youyou">
          <div class="weishiyong" v-if="item.couponsUserState&&item.couponsUserState==1">
            使用
          </div>
          <span class="color1" v-if="item.couponsUserState&&item.couponsUserState==3">
            已使用
          </span>
          <div class="shixiao"  v-if="item.couponsUserState&&item.couponsUserState==4">
            已失效
          </div>
        </div>
      </div>
      <!-- <div class="loading" v-if="loading">加载中...</div>
      <div class="no-more" v-if="noMore">没有更多了</div> -->
    </div>
    <div class="youhuijuanbox1" v-else>
      <el-empty description="暂无更多"></el-empty>
    </div>
  </div>
</template>

<script>
import { mydiscountCoupons} from "@/api/user"

export default {
  name: "discountCoupons",//我的优惠劵 
  
  data() {
    return {
      acindex:0,
      queryParams:{
        pageSize:10,
        pageNum:1,
        customerId:'',
        couponsUserState:1,
      },
      total:0,
      loading: false,
      list2:[],
    };
  },
  computed: {
    noMore () {
      return this.queryParams.pageNum*this.queryParams.pageSize >= this.total
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  mounted() {
    this.init()
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    async init(){
      if(this.queryParams.pageNum==1){
        this.list2=[]
      }
      this.queryParams.customerId=this.$store.state.user.customerId
      const res =await mydiscountCoupons(this.queryParams)
      console.log(res)
      this.list2 =[...this.list2,...res.rows] 
      this.total=res.total
    },
    changeit(e){
      this.acindex = e
      if(e==0){
        this.queryParams.couponsUserState=1
      }
      if(e==1){
        this.queryParams.couponsUserState=3
      }
      if(e==2){
        this.queryParams.couponsUserState=4
      }
      this.init()
    },
    handleScroll() {
      const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
      if (scrollTop + clientHeight >= scrollHeight - 50) this.load();
    },
    load () {
      if (this.loading || this.noMore) return;
      this.loading = true
      if(this.total>this.queryParams.page*this.queryParams.size){
        this.queryParams.page+=1
        this.init()
      }
      
    }
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding: 16px 16px 50px 16px;
  box-sizing: border-box;
  .title{
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    line-height: 36px;
    text-align: left;
    margin-bottom: 16px;
  }
  .tabs{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .tabitem{
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 40px;
      text-align: left;
      border: none;
      margin-right: 40px;
      cursor: pointer;
    }
    .activeit{
      color: #0672F9 !important;
      border-bottom: 2px solid #0672F9;
    }
  }
  .youhuijuanbox1{
    width: 100%;
    height: calc(100vh - 258px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .youhuijuanbox{
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;
    .youhuijuanitem{
     
      width: 400px;
      height: 96px;
      background: #FDF3F5;
      border-radius: 8px 8px 8px 8px;
      padding: 16px 24px ;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 16px 16px 0;

      .youzuo{
        .row1{
          display: flex;
          align-items: center;
          font-weight: bold;
          color: #DB4444;
          line-height: 24px;
          .danwei{
            margin-top: 10px;
            font-size: 16px;
          }
          .qianqian{
            font-size: 32px;
          }
        }
        .row2{
          font-weight: 400;
          font-size: 14px;
          color: #DB4444;
          line-height: 16px;
          text-align: center;
          margin-top: 10px;
        }
      }
      .youzhong{
        .row1{
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          text-align: left;
        }
        .row2,.row3{
          font-weight: 400;
          font-size: 14px;
          color: #828282;
          text-align: left;
          margin-top: 4px;
        }
      }
      .youyou{
        font-weight: 400;
        font-size: 14px;
        
        text-align: right;
        .color1{
          color: #DB4444;
        }
        .weishiyong{
          width: 60px;
          height: 28px;
          background: #EB5757;
          border-radius: 6px 6px 6px 6px;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 28px;
          text-align: center;
        }
        .shixiao{
          width: 74px;
          height: 28px;
          background: #CCCCCC;
          border-radius: 6px 6px 6px 6px;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 28px;
          text-align: center;
        }
      }
    }
    .huidu{
      filter: grayscale(100%);
    }
  }
}
</style>
